<template>
  <div>
    <el-dialog
      top="5vh"
      title="分包发货"
      width="60%"
      center
      :close-on-click-modal="false"
      :visible.sync="visible"
      :before-close="close"
    >
      <div v-loading="loading">
        <el-form
          :model="dataForm"
          :rules="dataRule"
          ref="dataForm"
          inline
          @keyup.enter.native="dataFormSubmit('dataForm')"
          label-width="100px"
        >
          <h3>商品信息</h3>
          <el-table :data="dataForm.tableData" style="width: 100%">
            <el-table-column label="商品图片" align="center">
              <template slot-scope="scoped">
                <div>
                  <el-popover placement="top-start" trigger="hover">
                    <a
                      :href="scoped.row.goods_img"
                      target="_blank"
                      title="查看最大化图片"
                      ><img
                        :src="scoped.row.goods_img"
                        style="width: 300px;height: 300px"
                    /></a>
                    <img
                      slot="reference"
                      :src="scoped.row.goods_img"
                      @click="$openImg(scoped.row.goods_img)"
                      style="width: 50px;height: 50px; cursor:pointer"
                    />
                  </el-popover>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="goods_title" align="center">
            </el-table-column>
            <el-table-column label="价格" prop="sale_price" align="center">
            </el-table-column>
            <el-table-column label="属性" prop="sku_set_name" align="center">
            </el-table-column>
            <el-table-column label="数量" prop="number" align="center">
            </el-table-column>
            <el-table-column label="待发货数量" align="center">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.number - scope.row.ship_num }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="已发货数量" prop="ship_num" align="center">
            </el-table-column>
            <el-table-column label="发货数量" align="center">
              <template slot-scope="scope">
                <div>
                  <!-- :prop="'tableData.' + scope.$index + '.num'"
                    :rules="dataRule.num" -->
                  <el-form-item>
                    <el-input-number
                      v-model="scope.row.num"
                      controls-position="right"
                      :min="0"
                      :max="scope.row.number - scope.row.ship_num"
                      :precision="0"
                      style="width: 100%;"
                    ></el-input-number>
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <h3>物流信息</h3>

          <el-form-item label="快递公司" prop="express_code">
            <el-select
              class="w-100"
              v-model="dataForm.express_code"
              @change="selectChange"
              placeholder="请选择快递公司"
              clearable
              filterable
            >
              <el-option
                v-for="item in options"
                :key="item.logistics_code"
                :label="item.company"
                :value="item.logistics_code"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物流单号" prop="logistic_code">
            <el-input
              maxlength="50"
              v-model="dataForm.logistic_code"
              placeholder="请输入快递单号"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit('dataForm')"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import orderService from '@/api/orderService.js'
export default {
  name: 'subpackageDetail',
  data() {
    return {
      visible: true,
      loading: false,
      dataForm: {
        express_code: '',
        logistic_code: '',
        tableData: []
      },
      options: [],
      dataRule: {
        express_code: [
          {
            required: true,
            message: '请先选择快递公司',
            trigger: 'change'
          }
        ],
        logistic_code: [
          {
            required: true,
            message: '快递单号不能为空',
            trigger: 'blur'
          }
        ],
        num: [
          {
            required: true,
            message: '发货数量不能为空',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.goodStreamList()
  },
  methods: {
    init(obj) {
      console.log(obj, 1111)
      this.dataForm.tableData = obj.child_order_list
      this.dataForm.order_id = obj.id
      for (let item of this.dataForm.tableData) {
        item.num = 0
      }
    },
    goodStreamList() {
      orderService.goodStreamList().then(res => {
        if (res.data && res.data.code == 200) {
          this.options = res.data.list
        }
      })
    },
    selectChange(e) {
      for (let item of this.options) {
        if (e == item.logistics_code) {
          this.dataForm.express_name = item.company
          break
        }
      }
    },
    dataFormSubmit(e) {
      this.$refs[e].validate(valid => {
        if (valid) {
          // if (this.type) {
          //   // 修改
          //   orderService.updateDelivery(this.dataForm).then(res => {
          //     if (res.data && res.data.code == 200) {
          //       this.$message.success('修改信息成功！')
          //       this.$emit('result', res.data.data)
          //     } else {
          //       this.$message.error(res.data.msg)
          //     }
          //   })
          // } else {
          let ship_items = []
          for (let item of this.dataForm.tableData) {
            if (item.num > 0) {
              ship_items.push({
                order_id: item.order_id,
                child_order_id: item.id,
                ship_num: item.num
              })
            }
          }
          this.dataForm.ship_items = ship_items
          delete this.dataForm.tableData
          console.log(this.dataForm, 1111)
          orderService.subpackageShipmentsSubmit(this.dataForm).then(res => {
            if (res.data && res.data.code == 200) {
              this.dataForm.express_code = ''
              this.dataForm.logistic_code = ''
              this.dataForm.tableData = []
              this.$message.success('发货成功！')
              this.$emit('result', res.data.data)
            } else {
              this.$message.error(res.data.msg)
            }
          })
          // }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    close(e) {
      this.dataForm.express_code = ''
      this.dataForm.logistic_code = ''
      this.dataForm.tableData = []
      // this.$refs.dataForm.resetFields()
      this.$emit('result')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
  .el-form-item {
    // margin-bottom: 0;
  }
}
</style>
